<template>
  <div id="views">
    <div class="form">
      <div>
        <span class="leftIcon"><img src="../../common/imgs/usericon.png" alt="" class="inputicon"></span>
        <input type="number" class="mobile" placeholder="请输入手机号" v-model="mobile" @input="inputChange()">
        <select  name="country" id="country" v-model="area_code" class="selectGreyJt" style="color: #262626">
          <!--onmousedown="javascript:return false;" @click="selCountry"-->
          <option v-for="(item,index) in areaCode_data" v-bind:value="item.area_code" v-bind:selected="index == 0">
            {{item.name_cn}}
          </option>
        </select>
      </div>
      <div>
        <span class="leftIcon">
          <img src="../../common/imgs/shield.png" alt="" class="inputicon">
        </span>
        <input type="text" class="code" placeholder="请输入验证码" v-model="code" @input="inputChange()">
        <button class="getCode">
          <tongdun-Countdown verfityMobile='true' wt='' hg='' ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60"  @run="sendCode" @getTdToken="getTdToken"></tongdun-Countdown>
        </button>
      </div>
      <div>
        <span class="leftIcon"><img src="../../common/imgs/lock.png" alt="" class="inputicon"></span>
        <input type="password" placeholder="请输入新密码" v-model="password" @input="inputChange()">
      </div>
      <div>
        <span class="leftIcon"><img src="../../common/imgs/lock.png" alt="" class="inputicon"></span>
        <input type="password" placeholder="请再次输入新密码" v-model="password2" @input="inputChange()">
      </div>
      <div class="submit">
        <button :class="buttonClass" @click="sub" :disabled="disabled">完 成</button>
      </div>
    </div>
  </div>
</template>
<script>
  import { resetPws , getAreaCode , getMbCode } from "../../http/api";
  import '../../common/css/iosselect.css';

  export default {
    name: 'forget_pws',
    components: {
      tongdunCountdown: resolve => {require(['../../components/tongdunCountdown'], resolve) },//同盾倒计时功能插件
    },
    data() {
      return {
        introduce: '忘记登录密码',
        mobile: '',//手机号
        password: '',//密码
        password2 : '',//密码2
        code: '',//验证码
        areaCode_data: '',//区域列表
        yzm_token: '',//同盾token
        blackBox: '',
        isSendCode : false,//是否发送手机验证码
        disabled: false,//注册按钮防止重复点击
        area_code: '0086',/*手机号区域*/
        country_id : '',//选择的国家id
        buttonClass: '' //注册按钮 是否置灰
      }
    },
    mounted() {
      let thiz = this;
      getAreaCode().then(function (res) {
        if (res.code == 200) {
          thiz.areaCode_data = res.data.country;
          thiz.area_code = thiz.areaCode_data[0].area_code;
          thiz.country_id = thiz.areaCode_data[0].id;
        }
      });
    },
    computed:{
      listenChange () {
        return { mobile:this.mobile , password:this.password  , code:this.code  , isSendCode :this.isSendCode , password2 : this.password2};
      }
    },
    watch:{
      'listenChange' ( val ){
        this.inputChange();
      }
    },
    methods: {
      selCountry() {
        let thiz = this;
        let iosSelect = require('../../common/js/iosselect').iosSelect;
        let iosSelArr = [];
        thiz.for(thiz.areaCode_data, function (item) {
          item.value = item.name_cn;
          item.country_id = item.id;
          iosSelArr.push(item);
        });
        iosSelect(1, [iosSelArr], {
          container: '#app',
          title: '选择国籍',
          oneLevelId: thiz.country_id,//默认选中的
          itemHeight: 40,
          itemShowCount: 7,
          callback: function (res) {
            thiz.area_code = res.area_code;
            thiz.country_id = res.country_id;
          }
        });
      },
      sendCode() {
        //发送验证码
        let thiz = this ,toast = require('../../common/js/toast').toast;
        if( !thiz.mobile ){
          toast('请输入手机号')
        }else if(thiz.$refs.tdEle.interval != null){
          toast('请勿重复点击^_^');
        }else{
          let param = {
            blackBox: thiz.blackBox, yzm_token: thiz.yzm_token, mobile: thiz.mobile, area_code: thiz.area_code,country_id:thiz.country_id,type : 'forgetPwd'
          };
          getMbCode(param).then(function (res) {
            if( res.code == 200){
              thiz.$refs.tdEle.begin();
              toast('验证码已发送至您的手机');
              thiz.isSendCode = true;
            }else{
              thiz.$refs.tdEle.resetTd();
            }
          })
        }
      },
      getTdToken(){
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          if( thiz.mobile ){
            thiz.sendCode()
          }
        })
      },
      inputChange() {
        this.mobile = this.mobile.replace('.', '');
        this.buttonClass = this.mobile && this.password && this.password2 && this.code && this.isSendCode && this.yzm_token ? 'allow' : 'notallow';
        this.$refs.tdEle.getMobile(this.mobile);
      },
      sub() {
        let thiz = this;
        /*提交*/
        if (this.buttonClass === 'allow' && !thiz.disabled) {
          let toast = require('../../common/js/toast').toast;
          if( thiz.password != thiz.password2 ){
            toast('两次密码不一致');
            return;
          }
          thiz.disabled = true;
          thiz.timeout(res => {
            thiz.disabled = false;
          }, 1000);
          let params = {
            phone: thiz.mobile, area_code: thiz.area_code, password: thiz.password, smscode: thiz.code
          };
          resetPws(params).then(res => {
            if (res.code == 200) {
              toast('修改密码成功');
              thiz.$router.replace({path: '/login', query: {mobile: thiz.mobile, area_code: thiz.area_code}});
            }
          });
        }
      }
    },
    destroyed() {
      require('../../common/js/iosselect').delSelect();
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{min-height: 100%;background: #fff;}
  .logo{padding:1.04rem 0;background: #fff;}
  .logo>img{width: 1.74rem;text-align: center;}
  .form{
    padding: 1.2rem 0.8rem;
    >div{
      overflow: hidden;background: #f7f7f7;border-radius: 1rem;height: 1.2rem;padding: 0 0.45rem;position: relative;margin-top: .3rem;text-align: left;
      >.leftIcon{
        display: inline-block;width: 0.27rem;height: 0.33rem;position: absolute;z-index: 1;left: 0.45rem;top:50%;margin-top: -0.165rem;
        .inputicon{
          width: 100%;max-height: 100%;
        }
      }
      input{width: 60%;height: 100%;padding-left:0.46rem;background: none;font-size: 0.32rem;}
      input[type=password]{width: 100%}
      .mobile{width: calc( 100% - 1.8rem );}
      .code{width: calc( 100% - 2.2rem );}
      .getCode{
        width:2.6rem;height: 100%;max-width: 50%;text-align: center;padding:0 .45rem;color: #ffd203;float: right;background: none;position: absolute;right: 0;top:0;font-size: .28rem;overflow: hidden;
        >span{line-height: 1.2rem;text-align: center;}
      }
    }
    >div:first-child{margin-top: 0;}
    .submit{
      margin-top: .5rem;overflow: hidden;padding:0;
      button{width: 100%;height: 100%;background: none;font-size: .36rem;}
      .allow,.allow[disabled]{background: #ffd203;color:#262626}
    }
    #country{
      width: 1.48rem;position: absolute;right: 0.52rem;font-size: .28rem;bottom:0;margin-top: -0.05rem;height: 100%;
      padding:0 0.15rem;padding-right: 0.35rem;padding-left: 0;line-height: 200%;
    }
  }
  .notmobile{font-size: .28rem;color: #AFB2B8;text-align: center;padding: 0.68rem 0.4rem;padding-top: 0;}
  .tologin{color:#ffd203}
</style>
